<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>微信内网页</h1>

      <button @click="fn1">打开手机相册</button>

      <hr />

      <button @click="fn2">开始录音</button>
      <button @click="fn3">结束录音</button>

      <p>{{translateResult}}</p>

      <hr />

      <img
        v-if="imageUrl"
        :src="imageUrl"
        alt=""
        style="width: 100px; height: 100px"
      />
    </div>

    <!-- 引入 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 引入 Vue SDK -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            ready: false, // wx.config 验证通过了嘛

            imageUrl: "", // 选择相册之后的图片地址

            translateResult: "", // 识别结果
          };
        },

        methods: {
          async initSDK() {
            // 1. 获取当前网页的url地址，作为接口参数
            const url = location.href.split("#")[0];
            // 2. 调用接口，获取 wx.config 需要的参数
            const resp = await fetch(`/api/jssdk?url=${url}`).then((response) =>
              response.json()
            );
            console.log("resp", resp);
            // 3. 调用 wx.config
            wx.config({
              ...resp,
              // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              jsApiList: [
                "chooseImage",
                "startRecord",
                "stopRecord",
                "playVoice",
                "translateVoice",
              ], // 必填，需要使用的JS接口列表
            });
            // 4. 通过ready接口处理成功验证
            wx.ready(() => {
              this.ready = true;
              console.log("config ready");
            });
            // 5. 通过error接口处理失败验证
            wx.error(() => {
              this.ready = false;
              console.log("config error");
            });
          },

          // 打开手机相册
          fn1() {
            if (!this.ready) return;

            wx.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
              success: (res) => {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                console.log("localIds", localIds);

                this.imageUrl = localIds[0];
              },
            });
          },

          fn2() {
            wx.startRecord();
          },

          fn3() {
            wx.stopRecord({
              success: (res) => {
                console.log("stopRecord success", res);

                // 播放
                wx.playVoice({
                  localId: res.localId, // 需要播放的音频的本地ID，由stopRecord接口获得
                });

                wx.translateVoice({
                  localId: res.localId, // 需要识别的音频的本地Id，由录音相关接口获得
                  isShowProgressTips: 1, // 默认为1，显示进度提示
                  success: (res) => {
                    alert(res.translateResult); // 语音识别的结果
                    this.translateResult = res.translateResult;
                  },
                });
              },
            });
          },
        },

        mounted() {
          this.initSDK();
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
